import React, { useState, useEffect ,useContext} from 'react';
import logo from './assets/images/logo.svg';
// import robots from './mockdata/robots.json'
import Robot from './components/Robot';
import style from './App.module.css';
import ShoppingCart from './components/ShoppingCart';
import {appContext} from './index'

interface Props {
  /* auther:string,
  singer:string */
}

interface State {
  robotList: any[]
  count: number
}

const App: React.FC = () => {
  const context = useContext(appContext)
  const [count, setCount] = useState<number>(0)
  const [robotList, setrobotList] = useState<any>([])
  const [loding, setLoding] = useState<boolean>(true)
  const [fetchError,setfetchError] = useState<string>()

  useEffect(() => {
    document.title = `fuckwor${count}`
    /* return () => {
      cleanup
    } */
  }, [count])

  useEffect(() => {    
    const fetchData = async ()=>{
      setLoding(true)
      try {
        const response = await fetch("http://jsonplaceholder.typicode.com/users")
        const data = await response.json()      
        setrobotList(data)
      } catch (error) {
        setfetchError(error.message)
      }      
      setLoding(false)
    }

    fetchData()

    /* fetch("http://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => setrobotList(data)) */
  }, [])

  return (
    <div className={style.app}>
      <div className={style.appHeader}>
        <img src={logo} alt="logo" className={style.appLogo} />
        <h1>机器人</h1>      
        <h2>{context.auther}</h2>
      </div>
  
      <button onClick={() => {
        setCount(count + 1)
      }}>countBtn</button>
      <span>count: {count}</span>
      <ShoppingCart />      
      {
        (fetchError || fetchError=="")
        &&
        <div>接口错误：{fetchError}</div>
        
      }
      {
        !loding
        ?
        <div className={style.robotList}>
        {robotList.map((r, i) =>
          <Robot key={i} id={r.id} email={r.email} name={r.username} />
        )}
      </div>
        :
        <div>
          loading...
        </div>
      }
      
    </div>

  )
}
/* class App extends React.Component<Props, State> {
  constructor(props) {
    super(props)
    this.state = {
      robotList: [],
      count: 0
    }
  }
  componentDidMount() {
    fetch("http://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => this.setState({ robotList: data }))
  }
  render() {
    return (
      <div className={style.app}>
        <div className={style.appHeader}>
          <img src={logo} alt="logo" className={style.appLogo} />
          <h1>机器人</h1>
        </div>
        <button onClick={() => {
          this.setState((preState, preProps) => {
            return { count: preState.count + 1 }
          }, () => {
            console.log("count:"+this.state.count);
          })

          this.setState((preState, preProps) => {
            return { count: preState.count + 1 }
          }, () => {
            console.log("count:"+this.state.count);
          })

        }
        }>btn</button><span>{this.state.count}</span>
        <ShoppingCart />
        <div className={style.robotList}>
          {this.state.robotList.map((r, i) =>
            <Robot key={i} id={r.id} email={r.email} name={r.username} />)}
        </div>
      </div>
    );
  }

} */

export default App;
